<template>
  <card-layout title="方量报告" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="excavation-report">
      <div class="report-content">
        <el-form :model="queryParams" label-width="auto">
          <el-form-item label="报告日期">
            <el-date-picker
              v-model="reportDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="数据日期">
            <el-date-picker
              v-model="dataCreateDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="报告类型">
            <el-select v-model="queryParams.type" clearable>
              <el-option :value="0" label="月度报告"> </el-option>
              <el-option :value="1" label="区域挖方"> </el-option>
              <el-option :value="2" label="两期挖方"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="form-actions">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="searchReports"> 查询 </el-button>
        </div>
        <div class="report-list">
          <div class="title">查询结果</div>
          <el-table :data="reportData" size="small" style="width: 100%">
            <el-table-column prop="dataDate" align="center" label="数据日期" />
            <el-table-column
              prop="creationDate"
              align="center"
              label="生成日期"
            />
            <el-table-column
              prop="reportType"
              align="center"
              label="报告类型"
            />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button size="small" @click="viewReport(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            hide-on-single-page
            background
            layout="prev, pager, next"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
const queryParams = ref({
  name: "",
  type: 0,
  pageNum: 1,
  pageSize: 10,
});
const total = ref(4);
const dataCreateDateRange = ref([]);
const reportDateRange = ref([]);
const emits = defineEmits(["close"]);
const reportData = ref([
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
  {
    dataDate: "2025/04/03",
    creationDate: "2025/04/01 00:00:31",
    reportType: "月度报告",
  },
]);
const resetForm = () => {};
const searchReports = () => {};
const getList = () => {};

const onClose = () => {
  emits("close");
};
</script>

<style lang="scss" scoped>
.chart {
  flex: 1;
}
.excavation-report {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .report-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .form-actions {
      display: flex;
      width: 100%;
      align-items: center;
      .el-button {
        flex: 1;
      }
    }

    .report-list {
      flex: 1;
      margin-top: 16px;
      .title {
        font-size: 16px;
        color: #fff;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
    }

    .pagination {
      margin-top: 15px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
